<template>
  <div>
    <div class='btn'>
      <a-button type="primary">新增工作经历</a-button>
    </div>

    <div class="table">
      <a-table rowKey="id" :columns="jobExperienceColumns" :data-source="jobExperienceData">
        <template v-for="col in jobExperienceColumns" :slot="col.dataIndex" slot-scope="text, record">
          <div :key="col.dataIndex">
            <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col.dataIndex)"></a-input>
            <template v-else>{{text}}</template>
          </div>
        </template>
        <span slot="opera" slot-scope="text, record">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">保存</a>
              <a-popconfirm title="确定取消?" @confirm="() => cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
            </span>
          </div>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import datas from '../../../utils/data'

export default {
  name: "tabs5",
  props: {
    jobHistoryList: Array
  },
  data () {
    this.cacheData = this.jobHistoryList.map(item => ({ ...item }));
    return {
      jobExperienceColumns: datas.jobExperienceColumns,
      jobExperienceData: this.jobHistoryList,
      editingKey: ''
    }
  },
  methods: {
    handleChange (value, key, column) {
      const newData = [...this.jobExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.jobExperienceData = newData;
      }
    },
    edit (key) {
      const newData = [...this.jobExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.jobExperienceData = newData;
      }
    },
    save (key) {
      const newData = [...this.jobExperienceData];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.jobExperienceData = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel (key) {
      const newData = [...this.jobExperienceData];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.jobExperienceData = newData;
      }
    },
  }
};
</script>

<style scoped leng="less">
.btn {
  margin: 0 0 20px;
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>